<template>
  <div>
    <el-collapse-transition>

      <section class="unit" ref='unit' v-if='visible.close'>
    
        <h2 class='title'>
    
          <span>各单位年龄结构及人员分布</span>
    
          <span>

            <i class="fa fa-minus" v-if='visible.min' @click.stop='visible.min = false'></i>

            <i class="fa fa-plus" v-else @click.stop='visible.min = true'></i>

            <i class="fa fa-times" @click.stop='visible.close = false'></i>

          </span>
    
        </h2>

        <el-collapse-transition>

          <div id='echarts1' v-show='visible.min' style='height:1020px;width:960px'></div>

        </el-collapse-transition> 
    
      </section>
     </el-collapse-transition> 

    <el-dialog :visible.sync="dialogTableVisible" top='8vh'>
  
      <el-table :data="tableData" style="width:800px" stripe>
  
        <el-table-column property="emplid" label="员工编号"></el-table-column>
  
        <el-table-column property="name" label="姓名"></el-table-column>
  
        <el-table-column property="dept_descr" width="300" label="所在部门"></el-table-column>
  
        <el-table-column label="操作">
  
          <template slot-scope="scope">
  
            <el-button 
  
              size="mini"

              type="primary" @click="ComputedEmplid(scope)">干部任免审批表</el-button>
          </template>

          </el-table-column>
        </el-table> 

    
          <el-pagination
              @current-change='currentChange'	
              :page-size="6"
              layout="total, prev, pager, next"
              :total="total"
              style='margin-top:20px;padding:0px;margin-left:-6px'
              >
            </el-pagination>
           <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogTableVisible = false">关闭</el-button>
          </span>
        </el-dialog>
    </div>
</template>

<script>
  import echarts from "echarts";
  
  import Vue from "vue";
  
  import URL from "../../common/js/dataLookUrl";

  import CollapseTransition from 'element-ui/lib/transitions/collapse-transition';

  import {
  
    Table,
  
    TableColumn,
  
    Dialog,
  
    Button,
  
    Pagination
  
  } from "element-ui";
  
  Vue.use(Table);
  
  Vue.use(TableColumn);
  
  Vue.use(Dialog);
  
  Vue.use(Button);
  
  Vue.use(Pagination);

  
  Vue.component(CollapseTransition.name, CollapseTransition)
  
  export default {
  
    data() {
  
      return {

        visible:{
          min:true,
          close:true
        },
  
        tableData: [],
  
        total: 0,
  
        dialogTableVisible: false,
  
        ageName: "",
  
        leaderUnit: ""
  
      };
  
    },
  
    props: ["res"],
  
    mounted() {
  
      if (this.$refs.unit) {
  
        let self = this;
  
        let unitData = {
  
          yAxisData() {
  
            let arr = [];
  
            self.res.unit.forEach((ele, i) => {
  
              arr.push(self.res.unit[i].c_leader_unit);
  
            });
  
            return arr;
  
          },
  
          fiftyabovecount() {
  
            let arr = [];
  
            self.res.unit.forEach((ele, i) => {
  
              arr.push(self.res.unit[i].unit_fiftyabovecount);
  
            });
  
            return arr;
  
          },
  
          fortytofiftysvcount() {
  
            let arr = [];
  
            self.res.unit.forEach((ele, i) => {
  
              arr.push(self.res.unit[i].unit_fortytofiftysvcount);
  
            });
  
            return arr;
  
          },
  
          fortytofiftysycount() {
  
            let arr = [];
  
            self.res.unit.forEach((ele, i) => {
  
              arr.push(self.res.unit[i].unit_fortytofiftysycount);
  
            });
  
            return arr;
  
          },
  
          thirtytofortsycount() {
  
            let arr = [];
  
            self.res.unit.forEach((ele, i) => {
  
              arr.push(self.res.unit[i].unit_thirtytofortsycount);
  
            });
  
            return arr;
  
          },
  
          thirtybelowcount() {
  
            let arr = [];
  
            self.res.unit.forEach((ele, i) => {
  
              arr.push(self.res.unit[i].unit_thirtybelowcount);
  
            });
  
            return arr;
  
          }
  
        };
  
  
  
        this.$nextTick(function() {
  
          this.drawPie("#echarts1", unitData);
  
        });
  
      }
  
    },
  
    methods: {
  
      ComputedEmplid: function(data) {
  
        localStorage.setItem('em_leader', data.row.emplid)
  
        window.open('module/leaderAppoint.html');
  
      },
  
      drawPie(id, unitData) {
  
        this.charts = echarts.init(this.$refs.unit.querySelector(id));
  
        this.charts.setOption({
  
          tooltip: {
  
            trigger: "axis",
  
            axisPointer: {
  
              // 坐标轴指示器，坐标轴触发有效
  
              type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
  
            }
  
          },
  
          legend: {
  
            top: "15px",
  
            data: ["30岁以下", "30-40岁", "40-45岁", "45-50岁", "50岁以上"]
  
          },
  
          grid: {
  
            left: "3%",
  
            right: "4%",
  
            bottom: "3%",
  
            containLabel: true
  
          },
  
          xAxis: {
  
            type: "value"
  
          },
  
          yAxis: {
  
            type: "category",
  
            data: unitData.yAxisData()
  
          },
  
          series: [{
  
              name: "30岁以下",
  
              type: "bar",
  
              stack: "总量",
  
              label: {
  
                normal: {
  
                  show: true,
  
                  position: "insideRight"
  
                }
  
              },
  
              data: unitData.thirtybelowcount()
  
            },
  
            {
  
              name: "30-40岁",
  
              type: "bar",
  
              stack: "总量",
  
              label: {
  
                normal: {
  
                  show: true,
  
                  position: "insideRight"
  
                }
  
              },
  
              data: unitData.thirtytofortsycount()
  
            },
  
            {
  
              name: "40-45岁",
  
              type: "bar",
  
              stack: "总量",
  
              label: {
  
                normal: {
  
                  show: true,
  
                  position: "insideRight"
  
                }
  
              },
  
              data: unitData.fortytofiftysvcount()
  
            },
  
            {
  
              name: "45-50岁",
  
              type: "bar",
  
              stack: "总量",
  
              label: {
  
                normal: {
  
                  show: true,
  
                  position: "insideRight"
  
                }
  
              },
  
              data: unitData.fortytofiftysycount()
  
            },
  
            {
  
              name: "50岁以上",
  
              type: "bar",
  
              stack: "总量",
  
              label: {
  
                normal: {
  
                  show: true,
  
                  position: "insideRight"
  
                }
  
              },
  
              data: unitData.fiftyabovecount()
  
            }
  
          ]
  
        });
  
  
  
        this.charts.on("click", echartsData => {
  
          let age = echartsData.seriesName;
  
          this.leaderUnit = echartsData.name;
  
  
  
          switch (age) {
  
            case "30岁以下":
  
              this.ageName = "thirtybelow";
  
              break;
  
            case "30-40岁":
  
              this.ageName = "thirtytoforty";
  
              break;
  
  
  
            case "40-45岁":
  
              this.ageName = "fortysvfifty";
  
              break;
  
            case "45-50岁":
  
              this.ageName = "fortysyfifty";
  
              break;
  
            case "50岁以上":
  
              this.ageName = "fiftyabove";
  
              break;
  
          }
  
  
  
          let params = {
  
            leaderType: "B",
  
            leaderUnit: this.leaderUnit,
  
            ageRange: this.ageName,
  
            pageNum: 1,
  
            pageSize: 6
  
          };
  
  
  
          this.dialogTableVisible = true;
  
  
  
          this.Axios.Post(URL.getempleMaintainBylist.url, params).then(res => {
  
            this.tableData = res.data.datas;
  
            this.total = res.data.total;
  
          });
  
        });
  
      },
  
      currentChange(index) {
  
        let params = {
  
          leaderType: "B",
  
          leaderUnit: this.leaderUnit,
  
          ageRange: this.ageName,
  
          pageNum: index,
  
          pageSize: 6
  
        };
  
  
  
        this.Axios.Post(URL.getempleMaintainBylist.url, params).then(res => {
  
          this.tableData = res.data.datas;
  
          this.total = res.data.total;
  
        });
  
      }
  
    }
  
  };
</script>

<style scoped>
  .unit {
  
    margin-top: 30px;
  
    background-color: #fff;
  
    border-top: 3px solid #00c0ef;
  
  }
  
  
  
  .unit .title {
  
    border-bottom: 1px solid #f1f1f1;
  
    line-height: 40px;
  
    padding: 0 10px;
  
    font-size: 18px;

    overflow: hidden;
  
  }
  
  
  
  .unit .title span:first-of-type {
  
    font-size: 18px;
  
    font-family: "Microsoft YaHei", museo-slab, "Helvetica Neue", Helvetica, Arial, sans-serif;
  
    color: rgb(68, 68, 68);
  
    font-weight: normal;

    float: left;
  
  }
  
  
  
  .unit .title i {
  
    cursor: pointer;
  
  }
  
  
  
  .unit .title span:last-of-type {
  
    font-size: 14px;
  
    font-family: "Microsoft YaHei", museo-slab, "Helvetica Neue", Helvetica, Arial, sans-serif;
  
    color: rgb(151, 160, 179);
  
    font-weight: normal;

    float: right;
  
  }
  
  
  
  .unit .title span:last-of-type i {
  
    margin-left: 10px;
  
  }
</style>